<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/sytle.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
		<title>服务计时</title>
	</head>
	<body style="background: #f1f1f1;">
		<div class="page">
			<header>
			      <div class="navbar">
				        <ul>
					        <li class="l-back">
					        <a href="javascript:history.go(-1)" >
					        <img src="${pageContext.request.contextPath}/images/left.png" alt="返回"/>
					        </a>
					        </li>
					        <li class="n-word">服务计时</li>
				        </ul>
			      </div>
		    </header>
		    
		    <div class="service_time">
		    	<div class="service_time_btn">
		    		<button class="start on" id="starttime">开始计时</button>
		    		<button class="end" id="endtime" >结束并结算</button>
		    		
		    		<input type="hidden" id="starts" name="starts"/>
		    		<input type="hidden" id="ends" name="ends"/>
		    	</div>
		    	<div class="service_time_start">
		    		<p>开始时间：<span id="starttext">
		    		 未开始
		    		</span></p>
		    	</div>
		    	<div class="service_time_reminder">
		    		<p>温馨提示：</p>
		    		<ul>
		    			<li>1、计时单位最小单位为“分钟”</li>
		    			<li>2、点击开始计时，则系统自动开始计时收费</li>
		    			<li>3、服务未结束时请不要点击结束并结算按钮</li>
		    			<li>4、若服务未完成时误将计时关闭，则以服务人员计时为准</li>
		    			<li>5、点击开始即表示开始服务，若临时退出，请从“我的订单”再次进入</li>
		    		</ul>
		    	</div>
		    </div>	
		    <div class="col-md-offset-3 col-md-6">
				<div class="progress">
					<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 100%;"></div>
				</div>
			</div>
			
		</div>
		<script>
			/* $(".service_time_btn button").click(function(){
				$(".service_time_btn button").removeClass("on");
				$(this).addClass("on").siblings().removeClass("on");
			}); */
			
			Date.prototype.Format = function (fmt) { //author: meizz 
			    var o = {
			        "M+": this.getMonth() + 1, //月份 
			        "d+": this.getDate(), //日 
			        "h+": this.getHours(), //小时 
			        "m+": this.getMinutes(), //分 
			        "s+": this.getSeconds(), //秒 
			        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
			        "S": this.getMilliseconds() //毫秒 
			    };
			    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			    for (var k in o)
			    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			    return fmt;
			}
			
			$(function(){
				var flag="${flag}";
				if(flag==1){
					$("#starttime").removeClass("on");
					$("#starttime").attr("disabled", true); 
					$("#endtime").addClass("on");
					
					$("#starttext").text("${startTime }");
				}
				
			});
			
			
			$("#starttime").click(function(){
				$("#starttime").removeClass("on");
				$("#endtime").addClass("on");
				
				var oDate = new Date(); //实例一个时间对象；
				var hours=oDate.getHours(); //获取系统时，
				var mins=oDate.getMinutes(); //分
				$("#starttext").text(hours+" : "+mins+" ");
				
				var s=oDate.Format("yyyy-MM-dd hh:mm");
				$("#starts").val(s);
				alert($("#starts").val());
				
				var starts2=$("#starts").val();
			
					 $.ajax({
						  url: "${pageContext.request.contextPath}/order/wardrobeStartDate.json?id=${orderID}",
						  success:function(data) {
							
							  if(data != 0) {
								  $("#starttime").attr("disabled",true);
							  }
						  }
					});  
				
				
				
			});
			
			$("#endtime").click(function(){
				//$("#starttime").addClass("on");
				$("#endtime").removeClass("on");
				
				var oDate = new Date(); //实例一个时间对象；
				var s=oDate.Format("yyyy-MM-dd hh:mm");
				$("#ends").val(s);
				
				var starts = $("#starts").val();
				var ends = $("#ends").val();
				alert(starts+"   "+ends);
				window.location = "${pageContext.request.contextPath}/order/wardrobePay.html?id=${orderID}&couponId=${couponId}";
				
			});
		</script>
	</body>

</html>